<template>
	<view class="conter">

		<header-box :title="title"></header-box>


		<u-search placeholder="搜索地址..." v-model="keyword" :show-action="fasle"></u-search>

		<view class="conter-box1">
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="navGetto()">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<!-- white-space: nowrap; -->
							<view class="demo-title">
								{{item.title}}
							</view>
							<!-- <view class="demo-price">
								{{item.price}}元
							</view> -->
							<view class="demo-tag">
								<view class="" style="display: flex; ">
									<view class="demo-tag-owner">
										<image src="../../static/tab/me.png " mode=""></image>
									</view>
									<view class="demo-tag-text">
										放心购
									</view>
								</view>
								<view class="color-fs">
									￥ 17
								</view>
							</view>
							<!-- <view class="demo-shop">
								{{item.shop}}
							</view> -->
							<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view  class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="navGetto()">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<!-- <view class="demo-price">
								{{item.price}}元
							</view> -->
							<view class="demo-tag">
								<view class="" style="display: flex; ">
									<view class="demo-tag-owner">
										<image src="../../static/tab/me.png " mode=""></image>
									</view>
									<view class="demo-tag-text">
										放心购
									</view>
								</view>
								<view class="color-fs">
									￥ 17
								</view>
							</view>
							<!-- <view class="demo-shop">
								{{item.shop}}
							</view> -->
							<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
						</view>
					</template>
				</u-waterfall>
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				keyword: '',
				title: '成都维纳斯时尚主',
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				info: '',
			}
		},
		onLoad(e) {
			this.infoId = e.id
			console.log('判定方向', e)
			this.info = e.info
			// this.addRandomData();
			this.headerTitle()
		},
		onShow() {
			console.log('判定方向', this.info)
			// this.addRandomData();
			this.getList()
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// // 模拟数据加载
			// setTimeout(() => {
			// 	this.addRandomData();
			// 	this.loadStatus = 'loadmore';
			// }, 1000)
		},
		methods: {
			
			navGetto() {
				uni.navigateTo({
					url: '/pages/site/phoneInfo?info=' + this.info
				})
			},
			
			
			headerTitle() {
				if(this.info == '1') {
					this.title = '场地详情'
				} 
				if(this.info == '2') {
					this.title = '正在出售'
				}
			},
			
			async getList() {
				const res = await this.$u.post('api/hotel.Index/details',{
					hotel_id: this.infoId	
				})
				console.log('res,',res)
			},
			
			// addRandomData() {
			// 	for (let i = 0; i < 10; i++) {
			// 		let index = this.$u.random(0, this.list.length - 1);
			// 		// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
			// 		let item = JSON.parse(JSON.stringify(this.list[index]))
			// 		item.id = this.$u.guid();
			// 		this.flowList.push(item);
			// 	}
			// },
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}

		.conter-box1 {



			.demo-warter {
				border-radius: 10rpx;
				// margin: 5px;
				background-color: #ffffff;
				padding: 8px;
				position: relative;
			}

			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}

			.demo-image {
				width: 100%;
				border-radius: 4px;
			}

			.demo-title {
				width: 320rpx;
				font-size: 30rpx;
				margin-top: 5px;
				color: #232323;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.demo-tag {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;
				
				.color-fs {
					color: #FF0000;
				}
			}

			.demo-tag-owner {
				color: #FFFFFF;
				display: flex;
				width: 50rpx;
				height: 50rpx;
				align-items: center;
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-text {
				color: #717171;
				margin-left: 10px;
				border-radius: 50rpx;
				line-height: 1;
				padding: 4rpx 14rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				font-size: 20rpx;
			}

			.demo-price {
				font-size: 30rpx;
				color: $u-type-error;
				margin-top: 5px;
			}

			.demo-shop {
				font-size: 22rpx;
				color: $u-tips-color;
				margin-top: 5px;
			}



		}

	}
</style>
